<template>
  <div class="an-wrapper" :style="{bottom:tweeningValue+'px',opacity:opacityValue}">
    <slot></slot>
  </div>
</template>
<script>
  import TWEEN from '@tweenjs/tween.js';

  export default {
    data() {
      return {
        tweeningValue: 0,
        opacityValue: 1,
        value: 0,
        isDone: false
      };
    },
    props: {
      interval: {
        default: 5000,
        type: Number,
      },
      sbottom: {
        default: 0,
        type: Number,
      },
      ebottom: {
        default: 50,
        type: Number,
      },
      offset: {
        default: 50,
        type: Number,
      },
    },
    watch: {
      value(newValue, oldValue) {
        if (this.isDone) {
          this.tween(this.sbottom - this.offset, this.sbottom);
          this.isDone = false;
        } else {
          this.isDone = true;
          this.tween(oldValue, newValue);
        }
      },
    },
    mounted: function () {
      this.tweeningValue = this.sbottom;
      setInterval(() => {
        if (this.isDone) {
          this.value = this.sbottom;
        } else {
          this.value = this.ebottom;
        }
      }, this.interval);
    },
    methods: {
      tween: function (startValue, endValue) {
        var vm = this;

        new TWEEN.Tween({tweeningValue: startValue}).to({tweeningValue: endValue}, this.interval).onUpdate(function (object) {
          vm.tweeningValue = object.tweeningValue.toFixed(0);
          if (startValue >= 0) {
            vm.opacityValue = (endValue - object.tweeningValue.toFixed(0)) / (endValue - startValue)
          } else {
            vm.opacityValue = (object.tweeningValue.toFixed(0) - startValue) / (endValue - startValue)
          }
        }).start();


      },
    },
  };
</script>
<style lang="less" scoped>
  .an-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
  }
</style>
